<script lang="tsx">
import { defineComponent, onMounted } from 'vue'
import { Graph, Addon } from '@antv/x6'
import '@antv/x6-vue-shape'
import CriterionQuota from './CriterionQuota.vue'

let graph: Graph
let stencil: Addon.Stencil

export default defineComponent({
  name: 'DragGraph',
  setup() {
    const init = () => {
      graph = new Graph({
        container: document.getElementById('drag-graph-main-container')!,
        grid: true
      })

      // TODO 根据请求到的指标数量获取 stencilGraphHeight 值
      // TODO 按组单独设置 stencilGraphHeight

      stencil = new Addon.Stencil({
        target: graph,
        getDropNode: () => graph.createNode({
          shape: 'vue-shape',
          width: 593,
          height: 165,
          component: 'count-component',
          tools: {
            name: 'button-remove',
            args: {
              x: '100%',
              y: 0,
              offset: { x: -10, y: 10 }
            }
          }
        }),
        stencilGraphWidth: 145,
        stencilGraphHeight: 180,
        search: () => true,
        placeholder: '请输入指标名称...',
        groups: [
          {
            title: '资产变动类',
            name: 'group1'
          },
          {
            title: '产品购买类',
            name: 'group2'
          },
          {
            title: '开户成功类',
            name: 'group3'
          },
          {
            title: '交易类',
            name: 'group4'
          },
          {
            title: '其他类',
            name: 'group5'
          }
        ],
        layoutOptions: {
          center: false
        }
      })
      document.getElementById('drag-graph-stencil')!.appendChild(stencil.container)

      const registerVueComponent = () => {
        Graph.registerVueComponent(
          'count-component',
          {
            template: `<criterion-quota />`,
            components: {
              CriterionQuota
            }
          },
          true
        )
      }

      registerVueComponent()

      // TODO 根据请求到的指标数量及分类转换节点
      // TODO 固定拖拽到画布的位置
      // TODO 节点数量超出画布大小添加滚动条
      // TODO 拖拽节点自动与上一节点连线
      // TODO 连线添加短路运算操作
      // TODO 已添加节点的数据获取与格式化

      const g1_1 = graph.createNode({
        shape: 'text-block',
        width: 135,
        height: 20,
        attrs: {
          body: {
            'stroke-width': 0,
            'fill-opacity': 0
          },
          label: {
            text: '时点存款达标值',
            fill: '#2C2C2C',
            fontSize: 14,
            style: 'display: block; line-height: 20px; cursor: pointer;'
          }
        }
      })

      stencil.load([g1_1], 'group2')
    }

    onMounted(() => {
      init()
    })

    return () => (
      <div id="drag-graph-container">
        <div id="drag-graph-stencil"></div>
        <div id="drag-graph-main-container"></div>
      </div>
    )
  }
})
</script>

<style lang="less">
#drag-graph-container {
  display: flex;
  border: 1px solid #dfe3e8;
  width: 896px;
  height: 596px;

  #drag-graph-stencil {
    width: 224px;
    height: 100%;
    position: relative;
    border-right: 1px solid #dfe3e8;

    .x6-widget-stencil {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      display: none;
    }
    .x6-widget-stencil-search-text {
      border-radius: 0;
      margin: 24px;
      width: 176px;
      line-height: 31px;
    }
    .x6-widget-stencil-content {
      top: 72px !important;
      padding: 0 24px;

      .x6-widget-stencil-group-content {
        padding-left: 30px;
      }
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
    }
  }

  #drag-graph-main-container {
    width: calc(100% - 224px);
    height: 100%;
  }
}
</style>
